* {
    font-family: "Microsoft YaHei";
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

//设置滚动条 start

::-webkit-scrollbar {
    background: transparent;
    height: 8px;
    width: 8px;
    border: none;
}

::-webkit-scrollbar-thumb {
    background: lightgray;
    border-radius: 5px;
}
//下底边输入框
.border-input{
    appearance: none;
    border: none;
    background: transparent;
    font-size: 14px;
    outline: none;
    line-height: 24px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.12);
    
}
.border-input:focus{
    border-bottom: solid 2px var(--md-theme-default-primary, rgba(0, 0, 0, 0.12));
    color: var(--md-theme-default-primary, rgba(0, 0, 0, 0.12));
    transition: border-bottom 0.4s  cubic-bezier(.25,.8,.25,1);
}

//透明输入框
.transparent-input {
    appearance: none;
    border: none;
    background: transparent;
    font-size: 14px;
    outline: none;
    width: auto;
    min-width: 50px;
}

.transparent-input:focus {
    color: var(--md-theme-default-primary, rgba(0, 0, 0, 0.12));
}


//卡片标题隐藏溢出字
.md-card-header:first-child>.md-title:first-child.md-title-text{
	line-height: 40px;
    width: calc(100% - 64px);
    overflow: hidden;
    text-overflow:ellipsis;
    margin:0;
}

//添加一些md 的颜色和背景设置
.md-primary-text {
    color: var(--md-theme-default-primary, rgba(0, 0, 0, 0.12));
}

.md-accent-text {
    color: var(--md-theme-default-accent, rgba(0, 0, 0, 0.12));
}

.md-primary-bg {
    color: white;
    background-color: var(--md-theme-default-primary, rgba(0, 0, 0, 0.12));
}

.md-accent-bg {
    color: white;
    background-color: var(--md-theme-default-accent, rgba(0, 0, 0, 0.12));
}


//设置数据源数据表格
#dataList_table tbody tr.md-table-row td.md-table-cell {
    max-width: 150px;
}

.md-toolbar.md-dense{
    height: 48px !important;
}



//toolbar md-dense下面的内容

.md-dense-body {
    height: calc(100% - 48px);
    overflow-x: hidden;
    overflow-y: hidden;
}
.md-dense-body1 {
    height: calc(100% - 48px);
    overflow-x: hidden;
    overflow-y: auto;
}
//form字段
.md-field {
    overflow: hidden;
    margin: 0;
    margin-bottom: 8px;
    .md-input {
        width: 100%;
    }
}
.md-switch {
    margin: 8px 16px;
}

//拖拽板面卡片的大小和位置
// @for $i from 1 through 10 {
//    [data-sizex='#{$i}'] { width:calc(#{$i*10%} - 8px);}
//     [data-sizey='#{$i}'] { height:calc(#{$i*10%} - 8px);}
//     [data-col='#{$i}'] { left:calc( #{($i - 1)*10%} + 4px);}
//   }
//   @for $i from 1 through 30 {    
//     [data-row='#{$i}'] { top:calc( #{($i - 1)*10%} + 4px);}
//    }
  //填满当前空间
.full-body {
    position: relative;
    height: 100%;
    width: 100%;
}
//查询无数据提示
.list-nodata{
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
}
//拖拽板面
.dash-board {
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto;
    width: calc(100% - 64px);
    height: calc(100% - 100px);
    
}

//设置输入字段
.table-row-item{
    font-size: 14px;
    height: 48px;
    display: flex;
    align-items: center;
    flex-direction: row;
    white-space: nowrap;
    color: var(--md-theme-default-text, rgba(0, 0, 0, 0.87));
    >span:nth-child(1){
        display: inline-block;
        align-items: center;
        height: 48px;
        line-height: 48px;
        min-width: 60px;
        text-align: left;
        padding-right: 8px;
        
    }
    >span:nth-child(2){
      
        display: inline-flex;
        align-items: center;
        height: 48px;
        flex: 1;
    }
}
//颜色块
.color-span {
    cursor: pointer;
    display: inline-block;
    height: 24px;
    width: 24px;
    min-width: 24px;
    white-space: nowrap;
    line-height: 24px;
    margin: 2px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.color-span:hover {
    transform: scale(1.1);
}

.color-span.active{
    box-shadow: 0 0 3px var(--md-theme-default-accent, rgba(0, 0, 0, 0.12));
}


//图表卡片
.chart-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
//拖拽板面中的图表标题
    .chart-card-header {
        height: 40px;
        display: flex;
        flex-direction: row;
        align-items: center;

        >span:nth-child(1) {
            flex: 1;
            font-size: 16px;
            display: block;
        width:calc(100% - 16px);
        padding: 0 8px;
        text-align: center;
        line-height: 40px;
        height: 40px;
        }

        >span:nth-child(2) {           
            display: none;
            position: absolute;
            line-height: 40px;
            z-index: 2;
            right:0;
            margin-right: 8px;
            >i{
                background: rgba(255,255,255,0.5);
                box-shadow: 0 0 4px rgba(255,255,255,0.5);
                border-radius: 50%;
                padding: 4px;
            }
        }
    }
    //普通图表标题
    .chart-card-header1 {
        display: block;
        width:calc(100% - 16px);
        padding: 0 8px;
        text-align: center;
        line-height: 40px;
        height: 40px;
    }
    .chart-card-header:hover {

        >span:nth-child(2) {
            display: inline;
           color:var(--md-theme-default-accent, rgba(0, 0, 0, 0.12));
        }
    }

    .chart-card-content {
        display: flex;
        height: calc(100% - 40px);
        align-items: center;
        justify-content: center;
    }
}
//拖拽板面添加
.chart-card.dashboard {
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
}


//分页器
.pager-container {
    display: flex;
    flex-direction: row;
    height: 48px;
    width: 100%;
    align-items: center;

    .pager-num {
        flex: 1;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        >ul {
            display: inline-flex;
            list-style: none;
            align-items: center;
            padding: 0;
            margin: 0;

            >li {
                padding: 0;
                margin: 0;
                display: inline-block;
            }
        }
    }

    .pager-op {
        display: inline-flex;
        flex-direction: row;
        align-items: center;

        >span {
            margin-right: 8px;
        }
    }
}
//数据表格
.data-table-container {
    border-top: solid 1px var(--md-theme-default-divider-on-background, rgba(0, 0, 0, 0.12));
    width: 100%;
    height: 100%;

    table {
        min-width: 100%;

        thead {

            color: var(--md-theme-default-text-accent-on-background, rgba(0, 0, 0, 0.54));


            tr {
                display: flex;
                align-items: center;
                min-height: 48px;

                th {
                    font-size: 12px;
                    text-align: left;
                    padding: 0 8px;
                    min-width: 50px;
                }
            }
        }

        tbody {
            tr {
                display: flex;
                align-items: center;
                min-height: 48px;
                transition: .3s cubic-bezier(.4, 0, .2, 1);
                transition-property: background-color, font-weight;
                will-change: background-color, font-weight;


                td {
                    transition: .3s cubic-bezier(.4, 0, .2, 1);
                    font-size: 13px;
                    text-align: left;
                    padding: 0 8px;
                    min-width: 50px;
                    white-space: normal;
                    word-break: break-all;
                }
            }

            tr:not(:first-child) {
                border-top: solid 1px var(--md-theme-default-divider-on-background, rgba(0, 0, 0, 0.12));
            }

            tr:hover {
                background-color: #fafafa;
            }
        }

    }

    .data-table-content {
        width: fit-content;
        min-width: 100%;
        height: calc(100% - 48px);
        border-top: solid 1px var(--md-theme-default-divider-on-background, rgba(0, 0, 0, 0.12));
        border-bottom: solid 1px var(--md-theme-default-divider-on-background, rgba(0, 0, 0, 0.12));
        overflow-x: hidden;
        overflow-y: auto;
    }
}
//信息表格
table.info-table{
    width: 100%;
    line-height: 48px;
    >caption{
        // font-weight: bold;
        font-size: 16px;
    }
    tr{
        
        td:nth-child(1){
            color: var(--md-theme-default-text-accent-on-background, rgba(0, 0, 0, 0.54));
            font-weight: bold;
            white-space: nowrap;
        }
        td:nth-child(2){
            white-space: normal;
            word-break: break-all;
            line-height: 20px;
        }
        td[colspan='2']{
            font-weight: normal;
            text-align: center;
        }
    }
}